<template>
    <div>
        <h1>侦听器 watchEffect</h1>
        <p>watchEffect() 允许我们自动跟踪回调的响应式依赖</p><br>
        inputVal: <input v-model="inputVal" type="text"><br><br>
        <div>
            <label for="">num1: </label>
            <input type="number" v-model="num1">
            <br>
            <br>
            <label for="">num2: </label>
            <input type="number" v-model="num2">
            <br>
            <br>
            <p>求和：{{ getSum }}</p>
        </div>
        <br>
        <hr><br>
        <div>
            <label for="">user.name: </label>
            <input type="text" v-model="user.name">
            <br>
            <br>
            <label for="">user.sex: </label>
            <input type="text" v-model="user.sex">
            <br>
            <br>
            <label for="">user.love.basketball: </label>
            <input type="text" v-model="user.love.basketball">
        </div>

        <div ref="my-input" v-if="isShow" style="width: 100px; height: 100px; background-color: skyblue;">

        </div>
        <button type="button" @click="changShow">显示盒子</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo316'
}
</script>

<script setup lang='ts'>
import { computed, reactive, ref, useTemplateRef, watch, watchEffect } from 'vue';



// 数据
const inputVal = ref('默认值')
const num1 = ref(0)
const num2 = ref(0)
const user = reactive({
    name: 'Cui梦娇',
    sex: '女',
    love: {
        basketball: '篮球'
    }
})

const isShow = ref(false)
const inputDom = useTemplateRef('my-input')

// 计算属性
const getSum = computed(() => {
    return num1.value + num2.value
})

const changShow = () => {
    isShow.value = !isShow.value
}

// 回调的触发时机
// 默认情况下，侦听器回调会在父组件更新（如有）之后、所属组件的DOM 更新之前被调用。
// 这意味着如果你尝试在侦听器回调中访问所属组件的 DOM ，那么 DOM 将处于更新前的状态。
watchEffect(() => {
    console.log(isShow.value, 'watchEffect-isShow.value');

    console.log(inputDom.value, 'watchEffect-inputDom.value');

})


// 若想在侦听器回调中能访问被 vue更新之后的所属组件的 DOM,你需要指明 flush:'post'选项
watchEffect(() => {
    console.log(isShow.value, 'watchEffect-isShow.value');

    console.log(inputDom.value, 'watchEffect-inputDom.value- flush: post');

},
    {
        flush: 'post'
    })

watch(isShow, () => {
    console.log(inputDom.value, '#watchEffect:post###inputDom.value')
},
    {
        flush: 'post'
    }
)

// 后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()：


// 如果你需要侦听一个嵌套数据结构中的几个属性，watchEffect() 可能会比深度侦听器更有效，
// 因为它将只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性。
// watchEffect(() => {
//     console.log(user.love.basketball, 'watchEffect-user.love.basketball')
// })

// watchEffect(() => {
//     console.log(user.name)
//     console.log(user.love.basketball, 'watchEffect-user.love.basketball')
// })

// 这种直接使用ref的方式，值在变化的时候侦听不到
// watchEffect(() => {
//     console.log(inputVal, '6:我就不value')
// })

</script>

<style></style>